<template>
    <div class="app-container">
        <el-dialog :title="title" :visible.sync="visible" width="800px" v-if="visible" append-to-body
            :close-on-click-modal="false">
            <el-form ref="form" :model="form" :rules="rules" :label-width="labelWidth" :disabled="disabled">
                <div v-for="(item, index) in form.recommendList" :key="200 + index">
                    <el-form-item :label="'类别' + (index + 1)" prop="" ref="">
                        <el-switch v-model="item.startType" :active-value="'2'" :inactive-value="'1'" active-text="启用"
                            inactive-text="停用">
                        </el-switch>
                    </el-form-item>
                    <el-form-item :label="'类别' + (index + 1) + '标题'" :prop="`recommendList.${index}.title`"
                        :rules="rules.title">
                        <el-input type="text" v-model="item.title" placeholder="请输入"
                            :style="{ width: inputWidth }"></el-input>
                    </el-form-item>
                    <el-form-item :label="'类别' + (index + 1) + '副标题'" :prop="`recommendList.${index}.subTitle`"
                        :rules="rules.subTitle">
                        <el-input type="text" v-model="item.subTitle" placeholder="请输入"
                            :style="{ width: inputWidth }"></el-input>
                    </el-form-item>
                    <el-form-item label="排序逻辑" :prop="`recommendList.${index}.sortType`" :rules="rules.sortType">
                        <el-select filterable v-model="item.sortType" placeholder="请选择" clearable size="small"
                            :style="{ width: inputWidth }">
                            <el-option v-for="dict in options" :key="dict.id" :label="dict.value" :value="dict.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="'标签' + (index + 1)">
                        <ImageUploadMore :limit="1" :fileSize="20" @successImg="(e) => { getImg(e, index) }"
                            :value="item.url">
                        </ImageUploadMore>
                    </el-form-item>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm('form')" :loading="submitLoading">保存提交</el-button>
                <el-button @click="cancel">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>
  
<script>
import {
    adminDict,
    recommendTypels,
    recommendSave,
} from '@/api/incentiveManagement/adConfigNew'

export default {
    // dicts: ['asset_card_type'],
    name: "Dialog",
    data() {
        return {
            labelWidth: '120px',
            inputWidth: '400px',
            id: '', //
            submitLoading: false,
            // 是否禁用表单
            disabled: false,
            // 弹出层标题
            title: "编辑推荐列表分类",
            // 是否显示弹出层
            visible: false,
            //排序下拉
            options: [],
            // 表单参数
            form: {
                recommendList: [
                    {
                        id: '',//
                        sort: '',//推荐序号
                        sortType: '',//排序逻辑 1 按后台设置排序 2 按用户定位距离排序 3 按商品上链时间排序 equity_card_recommend_type_sort_type
                        startType: '',//是否启用 1 停用 2 启用
                        subTitle: '',//类别副标题
                        title: '',//类别标题
                        url: '',//标签url
                    }
                ],
            },
            // 表单校验
            rules: {
                title: [{
                    required: true,
                    message: "请输入类别标题",
                    trigger: ["blur", "change"]
                }],
                subTitle: [{
                    required: true,
                    message: "请输入类别副标题",
                    trigger: ["blur", "change"]
                }],
                sortType: [{
                    required: true,
                    message: "请选择排序逻辑",
                    trigger: ["blur", "change"]
                }],
            },
        };
    },
    created() {

    },
    methods: {
        /** 打开弹框 */
        open(id, disabled, cardId) {
            this.getadminDict()
            this.getRecommendTypels()
            this.visible = true
        },
        // 取消按钮
        cancel() {
            this.visible = false;
            this.reset();
        },
        // 表单重置
        reset() {
        },
        //获取字典值
        getadminDict() {
            const params = {
                dictType: "equity_card_recommend_type_sort_type",
            };
            adminDict(params).then((res) => {
                this.options = res.result[0].dictList
            });
        },
        // 获取分类配置列表
        getRecommendTypels() {
            recommendTypels().then(res => {
                this.form.recommendList = res.result
            })
        },
        //活动图片
        getImg(e, index) {
            this.form.recommendList[index].url = e
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    var data = {
                        ...this.form
                    }
                    this.submitLoading = true
                    recommendSave(data).then(response => {
                        this.$message.success('执行成功');
                        this.$emit('success')
                        setTimeout(() => {
                            this.cancel();
                            this.submitLoading = false;
                        }, 800)

                    }).catch(() => {
                        this.submitLoading = false;
                    });
                }
            });
        },
    }
};

</script>
<style scoped>
.img_box {
    width: 100px;
    height: 70px;
    border-radius: 4px;
}

.flex {
    display: flex;
}
</style>
  